<template>
  <div class="page">
    <div class="banner">
      <img v-lazy="pageImgObject.pic07" alt="">
      <span id="share" @click="shareForWechat" v-text="''">分享</span>
    </div>
    <!--  -->
    <div class="container module-one" v-for="(MainItem,mainIndex) in headerData" :key="'main'+mainIndex">
      <div :style="{height:mainIndex==0 ? '3.5rem' :'3.84rem'}"><img v-lazy="pageImgArray[mainIndex]" alt=""></div>
      <div class="self-goods">
        <div class="goods-list"  v-for="(subItem,index) in MainItem" :key="index" @click="goForGoodsDetail(subItem.goods_id)">
          <img :src="subItem.img640_url" alt="">
          <span class="info">精选价<i>￥</i><i class="price">{{subItem.flash_price}}</i></span>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="container module-two" v-for="(MainItem,subIndex) in footerData" :key="subIndex">
      <div class="topic-title"><img v-lazy="pageImgArray[subIndex+3]" alt=""></div>
      <div class="goods-wrapper" style="background:#AA93D9;">
        <div class="goods-menu" v-if="MainItem.length" :style="{width:2.15*5+'rem'}">
          <ScrollItem :parentData="item" :styleData="childStyle" @childEvent="goForGoodsDetail" v-for="(item,idx) in MainItem" :key="idx"/>
        </div>
      </div>
    </div>
    <div class="more" v-if="moreData.specialArrList.length">
      <div><img v-lazy="pageImgObject.pic06" alt=""></div>
      <special-item :parentData="item" @childEvent="goForSpecialDetail" v-for="(item,itemIndex) in moreData.specialArrList" :key="itemIndex"/>
    </div>
  </div>
</template>

<script>
  import ScrollItem from './self.vue'
  import SpecialItem from 'components/GoodsItems/specialItem.vue'
  import MaskModal from 'components/maskDown/index.js'
  import { getGoodsListApi, handleMoreApi } from "@/apis/publicApi.js";
  export default {
    components:{ ScrollItem, SpecialItem },
    data(){
      return{
        pageImgObject:{},
        pageImgArray:[],
        bgColorArray:[],
        childStyle:{width:'2rem'},
        headerData:[],
        footerData:[],
        pageGoodsIds:[
          1609743,1609745,1607243,1609041,1609195,1609771,1607247,1609051,1609747,1609055,1609749,1607237,
          1609751,1609773,1609769,1612681,1609765,1609753,1609761,1609759,1612679,1609767,1609049,1609047,1609043,1609053,1609045,
          1609833,1609057,1609755,1609829,1609831,1609823,1607245,1607239,1607241,1607233,1607235,1609825,1611485,1609827,1609039
        ],
        moreData:{
          reqestIds:'72001,72003,71945,72005,71305,72017,72027,72009,72015,71897,72061,72029,72033,72011,71983,72025,72037,72039,72065,72067,71417,71903,71933,71907,72045,72047,71939',
          specialArrList:[]
        },
        requestLock:false,//请求锁用于上啦加载
        totalPage:2,//分页总数
        currentPage:1,//默认第一页
      } 
    },
    created(){
      if( this.shareJudge('isshare') ){ MaskModal(); }
      this.pageImgObjectFunc();
      let firstReqIds=this.pageGoodsIds.slice(0,12).toString();
      this.getGoodsAction(firstReqIds);
    },
    mounted(){
      let that=this;
      window.addEventListener('scroll',function(){
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;//已经滚动到上面的页面高度
        let scrollHeight =  Math.max(document.body.scrollHeight,document.body.offsetHeight);//页面高度
        let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;//浏览器窗口高度
        //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
        if (!that.requestLock) {
          that.requestLock=true;//添加锁定
          let secondReqIds=that.pageGoodsIds.slice(12).toString();
          that.getGoodsAction(secondReqIds);//请求数据
        }
      },false)
      that.moreSpecial();
    },
    methods:{
      pageImgObjectFunc(){
        this.pageImgObject={
          pic07:require('../../../assets/img/menDays/menDay07.jpg'),
          pic06:require('../../../assets/img/menDays/menDay06.jpg')
        };
        this.pageImgArray=[
          require('../../../assets/img/menDays/menDay01.jpg'),
          require('../../../assets/img/menDays/menDay02.jpg'),
          require('../../../assets/img/menDays/menDay03.jpg'),
          require('../../../assets/img/menDays/menDay04.jpg'),
          require('../../../assets/img/menDays/menDay05.jpg')
        ]
      },
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      },
      goForSpecialDetail(id){
        this.$navtiveUtils.jump2special(id);
      },
      getGoodsAction(list){
        if(this.currentPage>this.totalPage){ return false }
        getGoodsListApi(list).then(res =>{
          if(res.code==200 && res.status=='success'){
            if(this.currentPage==2){
              let limitTop = 2,perPageNum=15,tempData=[];
              for (let index = 0; index < limitTop; index++) {
                let element = res.data.slice(index*perPageNum,(index+1)*perPageNum);
                tempData.push(element);
              }
              this.footerData=this.footerData.concat(tempData);
            }else{
              let limitTop = 3,perPageNum=4,tempData=[];
              for (let index = 0; index < limitTop; index++) {
                let element = res.data.slice(index*perPageNum,(index+1)*perPageNum);
                tempData.push(element);
              }
              this.headerData=this.headerData.concat(tempData);
            }
            this.currentPage++;//分页数+1
            this.requestLock=false;//解除锁定
          }
        });
      },
      moreSpecial() {
        handleMoreApi(this.moreData.reqestIds).then(res => {
          this.moreData.specialArrList = res.data;
        });
      },
      shareJudge(e) {
        let temp = window.location.search.replace("?", "").split("&");
        let isFlag = false;
        for (let index = 0; index < temp.length; index++) {
          isFlag += temp[index].split("=").includes(e);
        }
        return isFlag;
      },
      shareForWechat() {
        let that = this;
        let pageTitle=document.title ;
        setTimeout(function() {
          that.$navtiveUtils.share(pageTitle, "潮流精选好货，限时折扣中，快来抢购！","");
        }, 300);
      }
    }
  }
</script>
<style lang="less">
html,body{
  background-image: url('../../../assets/img/menDays/menDay08.jpg');
  background-repeat: repeat-y;
  background-size: contain;
}
</style>

<style lang="less" scoped>
.banner{
  height: 5.68rem;
  position: relative;
  #share{
    width: 1.05rem;
    height: 0.5rem;
    position: absolute;
    top: 0.35rem;right: 0;
  }
}
.container{
  margin: 0 0.25rem;
  &.module-one{
    .self-goods{
      display: flex;
      flex-wrap: wrap;
      padding: 0.1rem 0.24rem;
      background: #AA93D9;
      .goods-list{
        width: 3.2rem;
        // height: 3.2rem;
        overflow: hidden;
        border-radius: 0.06rem;
        margin-right: 0.1rem;
        margin-bottom: 0.1rem;
        &:nth-child(2n){margin-right: 0}
        position: relative;
        .info{
          display:block;
          width: 100%;
          height: 0.6rem;
          text-align: center;
          line-height: 0.6rem;
          border-radius: 0.06rem;
          background: #A93022;
          font-size: 0.3rem;
          color: #fff;
          i{
            font-style: normal;
            font-size: 0.24rem;
            &.price{
              font-size: 0.36rem;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
  .topic-title{
    position: relative;
    height: 1.56rem;
    font-family: '微软雅黑';
    font-size: 0.24rem;
    color: #ffffff;
    text-align: center;
  }
  .goods-wrapper{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    .goods-menu{
      display: flex;
      flex-wrap: wrap;
      .goods{
        margin-bottom: 0.1rem;
      }
    }
    &::-webkit-scrollbar{width: 0;height: 0}
  }
}
.more{
  margin: 0 0.25rem 0.3rem;
  padding-bottom: 0.2rem;
  background: #AA93D9;
  .special{
    margin-bottom: 0.1rem;
  }
}
</style>